<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .photo-box{
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 三列布局 */
      gap: 10px; /* 图片之间的间距 */
    }
    .photo-box img{
      width: 100%; /* 图片宽度占满容器 */
      display: block; /* 避免图片之间的默认间距 */
    }
  </style>
</head>
<body>
  <div class="photo-box">
  </div>
<script type="text/javascript">
  const geologyPhotos = [
    "https://images.unsplash.com/photo-1604537529428-15bcbeecfe4d",
    "https://images.unsplash.com/photo-1604537529428-15bcbeecfe4d",
    "https://bucket-yufei.oss-cn-beijing.aliyuncs.com/image/bg141.jpg",
    "https://bucket-yufei.oss-cn-beijing.aliyuncs.com/image/bg141.jpg",
    "https://images.unsplash.com/photo-1604537529428-15bcbeecfe4d",
    "https://bucket-yufei.oss-cn-beijing.aliyuncs.com/image/bg141.jpg",
    "https://images.unsplash.com/photo-1604537529428-15bcbeecfe4d",
    "https://bucket-yufei.oss-cn-beijing.aliyuncs.com/image/bg141.jpg",
    "https://images.unsplash.com/photo-1604537529428-15bcbeecfe4d",
    "https://bucket-yufei.oss-cn-beijing.aliyuncs.com/image/bg141.jpg",
    "https://images.unsplash.com/photo-1604537529428-15bcbeecfe4d",
    "https://bucket-yufei.oss-cn-beijing.aliyuncs.com/03_masu_gaduation/2024_03_04/0be1e0a1033c4c298786c8d8c7606e5bjh.jpg",
    "https://images.unsplash.com/photo-1604537529428-15bcbeecfe4d",
    "https://bucket-yufei.oss-cn-beijing.aliyuncs.com/image/bg141.jpg",
    "https://images.unsplash.com/photo-1604537529428-15bcbeecfe4d",
    "https://bucket-yufei.oss-cn-beijing.aliyuncs.com/image/bg141.jpg",
    "https://images.unsplash.com/photo-1604537529428-15bcbeecfe4d",
    "https://bucket-yufei.oss-cn-beijing.aliyuncs.com/03_masu_gaduation/2024_03_04/0be1e0a1033c4c298786c8d8c7606e5bjh.jpg",
    "https://images.unsplash.com/photo-1604537529428-15bcbeecfe4d",
    "https://bucket-yufei.oss-cn-beijing.aliyuncs.com/image/bg141.jpg"
  ];
  //获取父盒子
  const photoBoxDom = document.querySelector('.photo-box');
  for (let i = 0; i < geologyPhotos.length; i++) {
    const newImageDom=document.createElement("img");
    newImageDom.src=geologyPhotos[i];
    newImageDom.style.width="300px";
    photoBoxDom.appendChild(newImageDom);
  }
</script>
</body>
</html>
